<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <el-row>
            <el-col :span="12">
              <el-tag type="info">{{ customer.name }}</el-tag>
              <el-tag v-if="customer.clue">选题：{{ customer.clue }}</el-tag>
              <el-tag v-else type="danger">未选题</el-tag>
              <el-tag v-if="customer.chachong_ruanjian">
                查重：{{ customer.chachong_ruanjian }}/
                {{ customer.chachonglv }}
              </el-tag>
              <el-tag :type="customer.died_line_info.tag_type">
                截至时间：{{ customer.died_line_info.str }}
              </el-tag>

              <el-tag>
                是否删除:{{ customer.is_deleted ? '已删除' : '未删除' }}
              </el-tag>
            </el-col>
            <el-col
              v-permissions="['Admin', 'Jiaowu']"
              :span="12"
              style="text-align: right"
            >
              <el-tag type="success">成交价：{{ customer.amount }}</el-tag>
              <el-tag type="success">
                已收：{{ customer.received_amount }}
              </el-tag>
              <el-tag
                :type="
                  customer.amount - customer.received_amount > 0
                    ? 'danger'
                    : 'success'
                "
              >
                剩余：{{ customer.amount - customer.received_amount }}
              </el-tag>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-row>
        <el-col :span="6">
          <p>学校:{{ customer.school.name }}</p>
        </el-col>
        <el-col :span="6">
          <p>专业:{{ customer.zhuanye }}</p>
        </el-col>
        <el-col :span="6">
          <p>字数要求:{{ customer.word_num }}</p>
        </el-col>
        <el-col :span="12">
          <p>学校要求:{{ customer.ask }}</p>
        </el-col>
        <el-col :span="12">
          <p>相关附件:{{ customer.file_list.length > 0 ? '' : '无' }}</p>
          <p v-for="(item, index) in customer.file_list" :key="index">
            <a :href="item.xurl" target="_blank" :download="item.name">
              {{ item.name }}
            </a>
          </p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { doEdit } from '@/api/boyiJob'
  import { baseURL } from '@/config'

  export default defineComponent({
    name: 'Customer',
    props: {
      customer: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['fetch-data'],
    setup({ emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        baseURL: baseURL,
      })

      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>
